<template>
  <el-container>
    <el-header>电商管理系统
      <div @click="logout" style="float: right; margin-top: 10px">退出</div>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu
            background-color="#d3dce6"
            :default-active="$route.path"
            class="el-menu-vertical-demo"
            router
            default-active
            :unique-opened="true"
            overflow-y: scroll>
          <el-submenu :index="item.path" v-for="item in asideData" :key="item.id" class="el-submenu__title">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span slot="title">{{ item.authname }}</span>
            </template>
            <el-menu-item :index="item1.path +''"
                          v-for="item1 in item.children"
                          :key="item1.id"
                          style="margin-left: 30px"
                          @click="clickNavbar(item1.path)">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span slot="title">{{ item1.authname }}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
        <!--        <el-button style="background-color: #2b4b6b;width: 100%;height: 30px;margin-bottom: 10px;"><</el-button>-->
      </el-aside>
      <el-container>
        <el-main>
          <el-card class="box-card">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/user' }">用户</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/goods'}">商品</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/add'}">增加</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/delete'}">echarts+websocket</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/'}"></el-breadcrumb-item>
            </el-breadcrumb>
            <router-view></router-view>
          </el-card>
        </el-main>
        <el-footer>www.chenHaiJun.com</el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      data: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      asideData: "",
    };
  },

  methods: {
    clickNavbar(path) {
      console.log(path)
    },

    logout() {
      this.sessionStorage.removeItem()
    },

    GetTreeData() {
      var that = this
      this.$axios.post('http://127.0.0.1:80/sales/treeData/').then(function (response) {
        console.log(response)
        that.data = response.data.Date;


      }).catch(function (error) {
        console.log(error);
      });
    },

    GetAsieData() {
      var that = this
      this.$axios.post('http://127.0.0.1:80/sales/aside/').then(function (response) {
        console.log("********************************************")
        // debugger
        console.log(response)
        that.asideData = response.data;
      }).catch(function (error) {
        console.log(error);
      });
    },


    changeEvent() {
      console.log("发生改变了")
    },

    checkChange() {
      console.log(this.$refs.tree.getCheckedNodes());
    },

    handleNodeClick(data) {
      console.log(data);
    }
  },

  created() {
    this.GetTreeData()
    this.GetAsieData()
  }
}
</script>

<style scoped>
.el-menu {
  border-right: solid 0px #e6e6e6;
  list-style: none;
  position: relative;
  margin: 0;
  padding-left: 0;
  background-color: #FFF;
}

.el-submenu__title {
  font-size: 14px;
  color: #303133;
  padding: 0 0px;
  cursor: pointer;
  transition: border-color .3s, background-color .3s, color .3s;
  box-sizing: border-box;
  margin-left: -60px !important;
}

.box-card {
  width: 100%;
  height: 100%;

}

.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-container {
  display: flex;
  flex-direction: row;
  flex: 1;
  flex-basis: auto;
  box-sizing: border-box;
  min-width: 0;
  height: 100%;
}

.el-tree-node__content {
  display: flex;
  align-items: center;
  height: 26px;
  cursor: pointer;
  background-color: red !important;
}

/*解决行高过高的问题*/
.el-main {
  background-color: #e9eef3;
  color: #333;
  /* text-align: center; */
  line-height: 20px !important;
}

.el-breadcrumb__item {
  margin-bottom: 30px !important;
}

</style>